<!-- 
适配方案有两种
    方案1
        rem + 媒体查询( + less)
    方案2：推荐
        rem + js（flexible.js）

-------------------------下面都是方案1的内容
设计稿常见尺寸宽度
    iPhone 4/5      640px
    iPhone 6/7/8    750px
    Android         320px、360px、375px、384px、400px、414px、500px、720px，其中大部分4.7~5寸的为720px

具体操作
    第一步
        选择设计稿尺寸，例如320px、750px
    第二步
        划分份数，目的是用在媒体查询中设置html的font-size大小，进而实现页面元素自适应的【等比例】缩放，
        划分份数不一，通常为15份或12份，这里选择15份，故字体大小为：
            屏幕宽度 / 划分份数 = html的font-size
                320px/15=21.33px
                750px/15=50px
    第三步
        页面元素大小都设置为rem单位，关系如下
            1rem = html的font-size
                1rem = 21.33px
                1rem = 50px
            元素rem值 = 元素px值 / html的font-size
            元素rem值 = 元素px值 / (屏幕宽度 / 划分份数)
                width = 100px / 21.33px = 4.68rem
                width = 100px / 50px = 2rem
        也就是说，要设置100px的宽度时，就改为4.68rem或2rem（这个单位需要自己计算或者利用vscode的插件帮你转换）

原理
    - 页面元素根据设备尺寸改变而等比例自适应
    - 媒体查询中设置html的font-size，而元素尺寸、位置坐标等换算成rem单位

注意
    移动端必须添加视口标签，等比例缩放才生效；PC端随意
 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- 移动端必须添加视口标签 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>等比例缩放</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            /* [min,750] */
            /* 320/15=21.33px */
            @media screen and (max-width: 750px) {
                html {
                    font-size: 21.33px;
                }
                div {
                    background-color: cyan;
                }
            }
            /* [750,max] */
            /* 750/15=50px */
            @media screen and (min-width: 750px) {
                html {
                    font-size: 50px;
                }
                div {
                    background-color: skyblue;
                }
            }

            div {
                /* 屏幕尺寸改变后，这里的元素大小也会随之改变，变为【10*21.33px】或【10*50px】 */
                width: 10rem;
                height: 10rem;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
